<template>
  <div class="admin-layout">
    <!-- 顶部导航栏 -->
    <header class="admin-header">
      <div class="header-content">
        <div class="logo">非遗系统管理端</div>
        <div class="user-info">
          <el-dropdown>
            <span class="admin-avatar">
              <img :src="adminInfo.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="管理员头像">
              <span>{{ adminInfo.username || '管理员' }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </header>

    <!-- 主体内容 -->
    <div class="admin-container">
      <!-- 侧边栏 -->
      <aside class="admin-sidebar">
        <el-menu
            default-active="1"
            class="sidebar-menu"
            mode="vertical"
            @select="handleMenuSelect"
        >
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span>系统首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template #title>
              <i class="el-icon-s-custom"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="2-1">报名信息</el-menu-item>
            <el-menu-item index="2-2">活动信息</el-menu-item>
            <el-menu-item index="2-3">非遗分类</el-menu-item>
            <el-menu-item index="2-4">建设信息</el-menu-item>
            <el-menu-item index="2-5">宣传视频</el-menu-item>
            <el-menu-item index="2-6">评论信息</el-menu-item>
            <el-menu-item index="2-7">反馈信息</el-menu-item>
            <el-menu-item index="2-8">公告信息</el-menu-item>
            <el-menu-item index="2-9">资讯信息</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template #title>
              <i class="el-icon-user-solid"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="3-1">用户信息</el-menu-item>
          </el-submenu>
        </el-menu>
      </aside>

      <!-- 主内容区 -->
      <main class="admin-main">
        <div class="content-header">
          <h2>欢迎管理员</h2>
        </div>
        <div class="content-wrapper">
          <router-view />
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getAdminInfo } from '../../api/auth'

const router = useRouter()
const adminInfo = ref({})

// 获取管理员信息
const fetchAdminInfo = async () => {
  try {
    const token = localStorage.getItem('token')
    if (!token) {
      ElMessage.error('请先登录')
      router.push('/login')
      return
    }

    // 检查用户角色
    const userRole = localStorage.getItem('userRole')
    if (userRole !== 'admin') {
      // 非管理员角色，重定向到普通用户首页
      router.push('/home')
      return
    }

    const response = await getAdminInfo()

    if (response.success === true || response.errorCode === 20000) {
      if (response.data) {
        adminInfo.value = {
          id: response.data.id || '',
          username: response.data.username || '管理员',
          avatar: response.data.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          ...response.data
        }
      }
    } else {
      ElMessage.error(response.message || '获取管理员信息失败')
    }
  } catch (error) {
    console.error('获取管理员信息失败:', error)
    if (error.response?.status === 401) {
      localStorage.removeItem('token')
      localStorage.removeItem('userRole')
      ElMessage.error('登录已过期，请重新登录')
      router.push('/login')
    } else {
      ElMessage.error('获取管理员信息失败，请刷新页面重试')
    }
  }
}

// 退出登录
const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userRole')
  ElMessage.success('已退出登录')
  router.push('/login')
}

// 处理菜单选择
const handleMenuSelect = (key) => {
  // 根据菜单key执行不同的路由跳转
  console.log('Selected menu:', key)

  switch (key) {
    case '1':
      router.push('/admin/home');
      break;
    case '2-1':
      router.push('/admin/registration-info');
      break;
    case '2-2':
      router.push('/admin/activity-info');
      break;
    case '2-3':
      router.push('/admin/heritage-category');
      break;
    case '2-4':
      router.push('/admin/construction-info');
      break;
    case '2-5':
      router.push('/admin/promotion-video');
      break;
    case '2-6':
      router.push('/admin/comment-info');
      break;
    case '2-7':
      router.push('/admin/feedback-info');
      break;
    case '2-8':
      router.push('/admin/Announcement-info');
      break;
    case '2-9':
      router.push('/admin/news-info');
      break;
    case '3-1':
      router.push('/admin/user-management');
      break;
    default:
      console.log('Unknown menu key:', key);
  }
}

// 页面加载时获取管理员信息
onMounted(() => {
  fetchAdminInfo()
})
</script>

<style scoped>
.admin-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.admin-header {
  height: 60px;
  background-color: #1a5276;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.admin-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.admin-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* 主体容器 */
.admin-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 侧边栏 */
.admin-sidebar {
  width: 220px;
  background-color: #2c3e50;
  color: white;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.sidebar-menu {
  background-color: transparent;
  border-right: none;
}

.sidebar-menu .el-menu-item,
.sidebar-menu .el-submenu__title {
  color: #ecf0f1;
  border-right: 3px solid transparent;
}

.sidebar-menu .el-menu-item:hover,
.sidebar-menu .el-submenu__title:hover {
  background-color: #34495e;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: #1a5276;
  border-right-color: #3498db;
  color: white;
}

/* 主内容区 */
.admin-main {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.content-header {
  margin-bottom: 20px;
}

.content-header h2 {
  margin: 0;
  color: #2c3e50;
}

.content-wrapper {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-height: 400px;
}
</style>